<template>
	<view class="container">
		<!-- 底层背景 -->
		<view class="bg">
			<image class="bgimg" src="../../static/assets/banner1.jpg" mode=""></image>
		</view>
		<!-- 头部栏 -->
		<view class="top">
			<view class="city">
				<view class="chosen" @click="toChooseCity">
					<view class="">{{now_city}}</view>
					<!-- 箭头 -->
					<image class="show" src="../../static/assets/godown.png" mode=""></image>
				</view>
			</view>
			<image class="person" src="../../static/assets/person2.png" mode=""></image>
		</view>
		<!-- 搜索框 -->
		<navigator class="searchbox" url="../search/search">
			<image src="../../static/assets/search.png" mode=""></image>
			<input type="text" value="" placeholder="请输入区域/小区,搜索房源" />
		</navigator>
		<!-- theme栏1 -->
		<view class="themelist">
			<view class="themeitem" @click="toZhengzu">
				<image src="../../static/assets/danjianIcon.png" mode=""></image>
				<text>整租</text>
			</view>
			<view class="themeitem" @click="toHezu">
				<image src="../../static/assets/gongyuIcon.png"></image>
				<text>合租</text>
			</view>
			<view class="themeitem" @click="toGongyu">
				<image src="../../static/assets/shiyouIcon.png"></image>
				<text>公寓</text>
			</view>
			<view class="themeitem"  @click="toRoommate">
				<image src="../../static/assets/zhengtaoIcon.png"></image>
				<text>找室友</text>
			</view>
			
		</view>
		<!-- theme栏2 -->
		<view class="themelist2">
			<view class="item" v-for="item in themelist" v-bind:key="item.theme_id" @click="tosortlist(item.props)">
				<image :src="item.apt_img_url" mode=""></image>
			</view>
		</view>
		<!-- 房源列表 -->
		<text class="guess">猜你喜欢的房子</text>
		<view class="houselist">
			<block v-for="item in houseList" v-bind:key="item.house_id">
				<navigator class="listitem" :url="'../houseDetail/houseDetail?id='+encodeURIComponent(item.house_id)">
					<view class="pic">
						<image :src="item.house_main_image" mode=""></image>
					</view>
					<view class="content">
						<text class="title">{{item.house_title}}</text>
						<text class="desc">{{item.house_desc}}</text>
						<view class="area">
							<image src="../../static/assets/location.png" mode=""></image>
							<text class="area">{{item.house_address_desc}}</text>
						</view>
						<view class="tagsbox">
							<view class="tags">
							<block v-for="items in item.house_tags">
								<text class="tagitem">{{items}}</text>
							</block>
						</view>
						</view>
						
						<text class="price">￥{{item.month_rent}}</text>
					</view>
				</navigator>
			</block>
		</view>
	</view>
</template>

<script>
	import {themeList} from "../../data/theme.js";
	import {cityHouseList} from "../../data/cityhouses.js";
	import store from "../../store/index.js"
	export default {
		computed:{
			now_city(){
				return store.state.nowCity
			},
			
		},
		components:{
		},
		data() {
			return {
				themelist:themeList.result.theme_list,
				houseList: [],
				// citycode:0
			}
		},
		onLoad() {
		},
		onShow() {
			// console.log(themeList);
			// console.log(this.themelist)
			// console.log(this.$store.state.nowCity)
			this.getCity();
			// console.log(this.citycode);
		},
		methods: {
			toChooseCity(){
			// 跳转切换不出现在tabBar的链接地址 选择城市
					uni.navigateTo({
					url:'../choosecity/choosecity',
					animationType:'slide-in-right',
					animationDuration:3000
				})
			},
		
			getCity(){
				// console.log(this.$store.state.nowCity);
				let nowcity=this.$store.state.nowCity;
				if(nowcity=='北京'){
					// console.log('beijing');
					this.citycode=1;
				}
				else if(nowcity=='广州'){
					this.citycode=0;
				}
				else if(nowcity=='杭州'){
					this.citycode=2;
				}
				else if(nowcity=='南京'){
					this.citycode=3;
				}
				// console.log(this.citycode);
				// console.log(cityHouseList[this.citycode])
				this.houseList=cityHouseList[this.citycode].houselist;
				// console.log(this.houseList);
			},
			toZhengzu(){
				let obj={
					money:'租金',
					way:'整租',
					props:'更多'
				};
				this.$store.commit('setobj',obj);
				uni.switchTab({
					url:"../sortlist/sortlist"
				})
			},
			toHezu(){
				let obj={
					money:'租金',
					way:'合租',
					props:'更多'
				};
				this.$store.commit('setobj',obj);
				uni.switchTab({
					url:"../sortlist/sortlist"
				})
			},
			// 1500 2000 近地铁 租金月付
			tosortlist(proparr){
				console.log(proparr)
				// let arr=JSON.parse(props)
				let obj={
					money:proparr[1],//租金月付 1500 2000
					way:'不限',
					props:proparr[0]//
				};
				this.$store.commit('setobj',obj);
				uni.switchTab({
					url:"../sortlist/sortlist"
				})
			},
			// 前往公寓页
			toGongyu(){
				uni.navigateTo({
					url:"../apartmentList/apartmentList"
				})
			},
			toRoommate(){
				uni.navigateTo({
					url:"../roommate/roommate"
				})
			}
		},
	}
</script>

<style lang='scss'>
	.container {
		width: 100%;
		padding-bottom: 100rpx;
		/* 背景 */
		.bg {
			width: 100%;
			height: 600rpx;
			position: absolute;
			z-index: -100;
			.bgimg {
				width: 100%;
				height: 100%;
			}
		}
		/* 头部 */
		.top {
			z-index: 2;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 2.5rem;
			
			.city {
				.chosen{
					color: #ffffff;
					font-size: 1rem;
					font-weight: bold;
					margin-left: 0.8rem;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.show{
						width: 1rem;
						height: 1rem;
					}
				}
			}
			.person{
				width: 1.5rem;
				height: 1.5rem;
				margin-right: 0.7rem;
			}
		}
		/* 搜索 */
		.searchbox{
			width:80%;
			margin: 0 auto;
			margin-top: 250rpx;
			height: 80rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			image{
				width: 40rpx;
				height:40rpx;
				margin-left: 20rpx;
			}
			input{
				display: block;
				width: 90%;
				margin-left: 10rpx;
			}
		}
		/* theme */
		.themelist{
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			margin: 0 auto;
			margin-top: 200rpx;
			.themeitem{
				width: 16%;
				height: 120rpx;
				text{
					display: block;
					width: 100%;
					text-align: center;
					color: #77787b;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.themelist2{
			width: 90%;
			margin: 0 auto;
			margin-top: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.item{
				width: 48%;
				height: 180rpx;
				margin-bottom: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		/* 房源列表 */
		.guess{
			display: block;
			margin-left:40rpx ;
			padding: 30rpx 0;
			color:#77787b ;
			font-weight: bold;
			font-size: 1.1rem;
		}
		.houselist{
			width: 93%;
			margin: 0 auto;
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.listitem{
				width: 100%;
				/* height: 210rpx; */
				margin-bottom: 25rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dddddd;
				.pic{
					width: 210rpx;
					height: 210rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-left: 20rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content{
					width: 65%;
					/* height: 210rpx; */
					/* background-color: #eeeeee; */
					display: flex;
					flex-direction: column;
					color: #464547;
					text{
						display: block;
						margin-left: 10rpx;
						padding: 0.1rem 0;
						&:nth-child(2){
							font-size: 0.6rem;
						}
					}
					.area{
						margin-left: 10rpx;
						display: flex;
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
						}
						text{
							font-size: 0.6rem;
							display: block;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					.tagsbox{
						width: 100%;
						margin-left: 10rpx;
						margin-top: 10rpx;
						overflow: scroll;
						.tags{
							width: 180%;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							.tagitem{
								display: block;
								padding: 0.1rem 0.15rem;
								background-color: #eeeeee;
								font-size: 0.6rem;
							}
						}
						&::-webkit-scrollbar{//隐藏滚动条
							width: 0;
							height: 0;
							background-color: transparent;
						}
					}
					.price{
						color: #585eaa;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
